﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title>对话列表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <!--<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />-->
    <link rel="stylesheet" type="text/css" href="css/webim_demo.css" />
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-table.css" />-->
    <style>
        .chatpart {
            margin-top: 0px;
            width: 100%;
        }

        .msgflow {
            width: 100%;
            height: 94%;
        }

        .aio {
            display: block;
        }
        .wl_faces_main{
            width: 98%;
            margin: auto;
        }
        .wl_faces_main ul{
            overflow: hidden;
            width: 100%;
            margin: 12px 0px;
        }
        
    </style>
</head>

<body style="max-width: 640px; margin: auto;">
    <div class="aio" id="webim_demo">
        <div class="chatpart" id="screenHight">
            <div class="msgflow">
                    <div class="time">
                            <p></p>
                        </div>
                <div class="onemsg">
                    <p class="msghead">
                        <img class="headurlClass" >
                    </p>
                    <p class="msgbody">
                        <pre></pre>
                    </p>
                </div>
                <div class="time">
                        15:30
                    </div>
                <div class="onemsg">
                        <p class="chat-right">
                            <img class="headurlClass" >
                        </p>
                        <p class="msgbody">
                                <pre class="pre-book"></pre>
                        </p>
                    </div>
            </div>
            <span id="msg_end" style="overflow:hidden"></span>
            <div class="editbar">
                <input class="msgedit" id="send_msg_text" onkeydown="onTextareaKeyDown()">
                <a class="chat02_title_btn ctb01" title="选择表情" onclick="showEmotionDialog()">
                    <img src="../webim/img/4.png" style="width: 30px; height: 30px;margin-top: 5px;">
                </a>
                <!-- <a class="chat02_title_btn ctb03" title="选择图片" onclick="selectPicClick()" href="#"> </a>
                <a class="chat02_title_btn ctb05" title="选择文件" onclick="selectFileClick()" href="#"> </a>
                <a class="chat02_title_btn ctb04" title="发送自定义消息" onclick="showEditCustomMsgDialog()" href="#"> </a> -->
                <div class="sendbar">
                    <button type="button" class="sendbtn" onclick="onSendMsg()">发送</button>
                    <!-- <button type="button" class="closebtn" onclick="onClose()">关闭</button> -->
                </div>
                <div id="wl_faces_box" class="wl_faces_box">
                    <div class="wl_faces_content" style="width: 100%;">
                        <div class="title">
                            <ul>
                                <li class="title_name">常用表情</li>
                                <li class="wl_faces_close">
                                    <span onclick='turnoffFaces_box()'>&nbsp;</span>
                                </li>
                            </ul>
                        </div>
                        <div id="wl_faces_main" class="wl_faces_main">
                            <ul id="emotionUL">
                            </ul>
                        </div>
                    </div>
                    <div class="wlf_icon"></div>
                </div>
            </div>



        </div>
        <div class="bottom"></div>
    </div>
    <script type="text/javascript" src="js/lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/lib/jquery/jquery-ui.js"></script>
    <script type="text/javascript" src="js/lib/lodash.min.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap/bootstrap.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="js/lib/xss.js"></script>

    <!--web im sdk-->
    <script type="text/javascript" src="sdk/webim.js"></script>
    <!--<script type="text/javascript" src="sdk/webim.min.js"></script>-->
    <script type="text/javascript" src="sdk/json2.js"></script>

    <!--web im sdk 登录 示例代码-->
    <script type="text/javascript" src="js/login/login.js"></script>
    <!--web im sdk 登出 示例代码-->
    <script type="text/javascript" src="js/logout/logout.js"></script>
    <!--web im 解析一条消息 示例代码-->
    <script type="text/javascript" src="js/common/show_one_msg.js"></script>
    <!--web im demo 基本逻辑-->
    <script type="text/javascript" src="js/base.js"></script>
    <!--web im sdk 资料管理 api 示例代码-->
    <script type="text/javascript" src="js/profile/profile_manager.js"></script>
    <!--web im sdk 好友管理 api 示例代码-->
    <script type="text/javascript" src="js/friend/friend_manager.js"></script>
    <!--web im sdk 最近联系人 api 示例代码-->
    <script type="text/javascript" src="js/recentcontact/recent_contact_list_manager.js"></script>
    <!--web im 切换聊天好友或群组 示例代码-->
    <script type="text/javascript" src="js/switch_chat_obj.js"></script>
    <!--web im sdk 获取c2c获取群组历史消息 示例代码-->
    <script type="text/javascript" src="js/msg/get_history_msg.js"></script>
    <!--web im sdk 发送普通消息(文本和表情) api 示例代码-->
    <script type="text/javascript" src="js/msg/send_common_msg.js"></script>
    <!--web im 监听新消息(c2c或群) 示例代码-->
    <script type="text/javascript" src="js/msg/receive_new_msg.js"></script>
    <script type="text/javascript">
        //帐号模式，0-表示独立模式，1-表示托管模式
        var accountMode = 0;

        //官方 demo appid,需要开发者自己修改（托管模式）
        var sdkAppID = 1400101388;
        var accountType = 29625;

        var AdminAcount = '1';
        //当前用户身份
        var loginInfo = {
            'sdkAppID': sdkAppID, //用户所属应用id,必填
            'identifier': null, //当前用户ID,必须是否字符串类型，必填
            'accountType': accountType, //用户所属应用帐号类型，必填
            'userSig': null, //当前用户身份凭证，必须是字符串类型，必填
            'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
            'headurl': 'img/me.jpg' //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
        };


        var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
        var selToID = null; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
        var selSess = null; //当前聊天会话对象
        if (webim.Tool.getQueryString('toid')) {
            selToID = webim.Tool.getQueryString('toid');
        }
        //默认好友头像
        var friendHeadUrl = 'img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友

        //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
        var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息

        var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
        var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数

        var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
        var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

        var emotionFlag = false; //是否打开过表情选择框

        var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
        var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息

        //监听连接状态回调变化事件
        var onConnNotify = function (resp) {
            var info;
            switch (resp.ErrorCode) {
                case webim.CONNECTION_STATUS.ON:
                    webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
                    break;
                case webim.CONNECTION_STATUS.OFF:
                    info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
                    // alert(info);
                    webim.Log.warn(info);
                    break;
                case webim.CONNECTION_STATUS.RECONNECT:
                    info = '连接状态恢复正常: ' + resp.ErrorInfo;
                    // alert(info);
                    webim.Log.warn(info);
                    break;
                default:
                    webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
                    break;
            }
        };
        //IE9(含)以下浏览器用到的jsonp回调函数
        function jsonpCallback(rspData) {
            webim.setJsonpLastRspData(rspData);
        }

        //监听事件
        var listeners = {
            "onConnNotify": onConnNotify, //监听连接状态回调变化事件,必填,
            "jsonpCallback": jsonpCallback, //IE9(含)以下浏览器用到的jsonp回调函数，
            "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填

        };
        //初始化时，其他对象，选填
        var options = {
            'isAccessFormalEnv': true, //是否访问正式环境，默认访问正式，选填
            'isLogOn': false //是否开启控制台打印日志,默认开启，选填
        }
        if (webim.Tool.getQueryString('uid')) {
            var uid = webim.Tool.getQueryString('uid');
            loginInfo.identifier = uid;
            $.ajax({
                url: apiHost + '/api/WebIM/FetchSign',
                type: 'GET',
                data: {
                    uid: uid
                },
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    console.log(data)
                    loginInfo.userSig = data.Data;
                    webim.login(
                        loginInfo, listeners, options,
                        function (resp) {
                            console.log(resp)
                            loginInfo.identifierNick = resp.identifierNick; //设置当前用户昵称
                            loginInfo.headurl = resp.headurl; //设置当前用户头像
                            initMsgFlowListApp()
                        },
                        function (err) {
                            console.log(err)
                        }
                    );
                },

            })
        }
        var msgflow = document.getElementsByClassName("msgflow")[0];
        var bindScrollHistoryEvent = {
            init: function () {
                msgflow.onscroll = function () {
                    if (msgflow.scrollTop == 0) {
                        msgflow.scrollTop = 10;
                        if (selType == webim.SESSION_TYPE.C2C) {
                            getPrePageC2CHistoryMsgs();
                        } else {
                            getPrePageGroupHistoryMsgs();
                        }

                    }
                }
            },
            reset: function () {
                msgflow.onscroll = null;
            }
        };
        $(function () {
            var screenHight = $(window).height();
            $('#screenHight').css('height', screenHight);
            console.log(screenHight)
        })
    </script>
</body>

</html>